<template>
  <scroll-view class="category-list" scroll-y>
    <view 
      v-for="(category, index) in categories" 
      :key="category.id"
      class="category-item"
      :class="{ active: currentIndex === index }"
      @tap="$emit('select', index)"
    >
      <view class="category-content">
        <text class="category-name">{{ category.name }}</text>
        <view v-if="getCategoryCount(category) > 0" class="category-badge">
          {{ getCategoryCount(category) }}
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Category {
  id: number;
  name: string;
  products: any[];
}

interface Props {
  categories: Category[];
  currentIndex: number;
  cartItems: any[];
}

const props = defineProps<Props>();
defineEmits(['select']);

// 计算分类商品在购物车中的数量
const getCategoryCount = (category: Category) => {
  return props.cartItems
    .filter(item => category.products.some(p => p.id === item.id))
    .reduce((sum, item) => sum + item.count, 0);
};
</script>

<style scoped>
.category-list {
  width: 160rpx;
  height: 100%;
  background-color: #f8f8f8;
  flex-shrink: 0;
}

.category-item {
  padding: 30rpx 20rpx;
  position: relative;
}

.category-item.active {
  background-color: #fff;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 40rpx;
  background-color: #00C853;
  border-radius: 0 4rpx 4rpx 0;
}

.category-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-name {
  font-size: 26rpx;
  color: #666;
}

.category-item.active .category-name {
  color: #00C853;
  font-weight: bold;
}

.category-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background-color: #ff3b30;
  color: #fff;
  font-size: 20rpx;
  border-radius: 16rpx;
  padding: 0 8rpx;
}
</style>